<template>
	<view class="fenlei">
		<view class="box" v-for="box in fenlei">
			<text class="name">{{box.name}}</text>
			<view class="button">
				<text v-for="(button,index) in box.text" :key="index" class="button_name" @click="toSearch(button)">{{button}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fenlei:[
					{"name":"大家都在搜",
					"text":["汤","蛋糕","早餐","豆腐"],},
					{"name":"肉类",
					"text":["排骨","虾","鸡","牛肉","鱼","羊肉"],},
					{"name":"热门食材",
					"text":["山药","鸡蛋","白菜","藕","萝卜","金针菇"],},
					{"name":"流行学做",
					"text":["牛轧糖","蛋挞","粥","凉菜","披萨","面条"],},
					{"name":"烘培",
					"text":["戚风蛋糕","曲奇","蛋糕卷","布丁","提拉米苏","吐司"],},
				]
			};
		},
		methods:{
			toSearch(button){
				console.log(button);
				uni.navigateTo({
					url: "../../pages/Search/Search?value=" + button,
				});
			}
		}
	}
</script>

<style lang="less">
	.fenlei{
		padding: 25px;
		font-size: 14px;
		line-height: 24px;
		.box{
			text-align: center;
			.name{
				font-weight: 600;
			}
			.button{
				margin-top: 15px;
				margin-bottom: 20px;
				.button_name{
					display: inline-block;
					margin-left: 10px;
					padding: 5px 20px;
					border: 1px solid;
					border-radius: 25px;
					&:nth-of-type(5){
						margin-top: 15px;
					}
				}
			}
			&:first-of-type{
				.button{
					color: #11c911;
				}
			}
			&:nth-of-type(2){
				.button{
					color: #df6b3f;
				}
			}
			&:nth-of-type(3){
				.button{
					color: #6161e3;
				}
			}
			&:nth-of-type(4){
				.button{
					color: orange;
				}
			}
			&:nth-of-type(5){
				.button{
					color: #00803f;
				}
			}
		}
	}
</style>
